<script>
import {
  editreturn,
  evaluation,
  evaluationManagementEdit,
  managementAdd,
  managementTitleDetails, managementTitleImport,
  titleDetails
} from "@/api/evaluationManagement/http";
import {management} from "@/api/evaluationManagement/deleteDom";
import {getToken} from "@/utils/auth";

export default {

  // name: 'management',
  data() {
    return {
      // headerObj: '',
      id: this.$route.query.id,
      // 导入弹出框
      dialogVisiblePlus: false,
      total: '',
      options: {
        name:'',
        enable:'0'
      },
      query: {
        pageSize: 10,
        pageNum: 1
      },
      // radio

      // 编辑弹框  信息测评

      textarea: '',
      // 测评名称   双向绑定
      // testNam: '',
      // 状态
      statu: '',
      // valueAdd: '',

      // 编辑
      dialogVisible: false,
      dialogVisibleAdd: false,
      dialogVisibleAddB: false,
      dialogVisibleAddS: false,
      form: {
        radio: '0',
        // name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        text: '',
        value: '',
        // testName:'',
        valueAdd: '',
        textB: '',

      },
      tableData: [],
      multipleSelection: [],
      main: '',
      // addData: {
      //   id: this.options.id,
      //   name: this.options.name,
      //   enable: this.options.radio
      // }
      headerObj: {
        Authorization: 'Bearer ' + getToken()
      },
      loading:false,
    }

  },
  created() {
    this.getWey()
  },
  methods: {
    // 重置
    replacement(){
      this.form.valueAdd=''
      this.getWey()
    },
    // 文件上传成功世
    handleSuccess(file){
      this.dialogVisiblePlus = false
      this.$message.success("上传成功")
    },
    //文件上传时
    handleProgress(){
      this.loading = true
    },
    // 上传
    upload() {
      this.$refs.upload.submit()
    },
    //模版下载
    exportStudentsPuls(){},
    // 导入
    leadInto() {
      this.dialogVisiblePlus = true
    },
    getWey() {
      evaluation(
      ).then(res => {
        // console.log(res)
        this.tableData = res.rows
        this.total = res.total
      })
    },
    // 点击编辑时
    compile(row) {
      // console.log(row)
      this.dialogVisible = true
      this.options=JSON.parse(JSON.stringify(row));
    },
    // 编辑提交
    editConfirm() {
      evaluationManagementEdit(this.options).then(res => {
        console.log(res)
        this.ssearch()
        this.$message({
          type: 'success',
          message: '编辑成功!'
        })
      })
      this.dialogVisible = false
    },
    // 分页
    appointChangSize(val) {
      this.query.pageSize = val;
      this.ssearch(this.query);
    },
    appointChangCurrent(val) {
      this.query.pageNum = val;
      this.ssearch(this.query);
    },
    // 搜索
    ssearch() {
      this.ssearchH = {
        name: this.form.valueAdd,
        pageSize: this.query.pageSize,
        pageNum: this.query.pageNum
      }
      evaluation(this.ssearchH).then(res => {
        console.log(res)
        this.total = res.total
        this.tableData = res.rows
      })
    },
    // 添加按钮
    addLogin() {
      this.dialogVisibleAddB = false

      managementAdd({
        name: this.form.text,
        enable: this.form.enable}
      ).then(res => {
        console.log(res)
        this.$message({
          type: 'success',
          message: '添加成功!'
        })
        this.getWey()
      }).catch(res => {
        this.$message({
          type: 'info',
          message: '已取消添加'
        });
      })
      this.form={
        text:'',
        enable:0
      }
    },
    // 编辑弹框
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    // 移除
    deleteRow(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        management(row.id.toString()).then((res) => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            evaluation().then(res => {
              console.log(res)
              this.tableData = res.rows
            })
          }

        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 详情
    handleClick(row) {
      console.log(row);
      this.$router.push({
          path: 'heartDetails',
          query: {
            id: row
          }
        }
      )
    },
    // 设置
    install(row) {
      this.$router.push({
        path: 'setupmgnt',
        query: {id: row}
      })
    },
    onSubmit() {
      console.log('submit!');
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
}
</script>

<template>
  <div>
    <div class="container">
      <div class="evaluation">
        <div class="search">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="测评名称">
              <el-input placeholder="请输入测评名称" v-model="form.valueAdd" clearable></el-input>
              <!--              <el-select v-model="form.valueAdd" filterable placeholder="请选择名称">-->
              <!--                <el-option-->
              <!--                  v-for="item in tableData"-->
              <!--                  :key="item.id"-->
              <!--                  :label="item.name"-->
              <!--                  :value="item.name">-->
              <!--                </el-option>-->
              <!--              </el-select>-->

            </el-form-item>
          </el-form>
          <div class="titleBtn">
                        <el-row>
                          <el-button @click="replacement">重置</el-button>
                          <el-button type="primary" @click="ssearch">搜索</el-button>
                        </el-row>
          </div>
        </div>
        <div class="button">
          <div class="add">
            <el-form>
              <el-button type="primary" @click="dialogVisibleAddB = true"
                         style="color: white;padding: 10px 20px">
                添加
              </el-button>
              <el-button type="primary" @click="leadInto" style="padding: 10px 20px">导入</el-button>
            </el-form>
          </div>

        </div>
<!--http://192.168.5.120:8090-->
        <!-- 导入弹出框-->
        <el-dialog
          title="测评信息导入"
          :visible.sync="dialogVisiblePlus"
          width="30%"
          :before-close="handleClose">
        <span>
          <el-upload
            class="upload-demo"
            drag
            v-loading="loading"
            :headers="headerObj"
            :on-progress="handleProgress"
            :on-success="handleSuccess"
            :limit="1"
            ref="upload"
            :auto-upload="false"
            action="http://192.168.5.120:8090/evaluation/management/title/import">
             <i class="el-icon-upload"></i>
           <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em>
           </div>
             <div class="el-upload__tip text-center" slot="tip">
            <div class="el-upload__tip" slot="tip">仅允许导入xlsx格式文件。<el-link type="primary" :underline="false">
                  <a target="_blank" href="/studentsfile.xlsx" @click="exportStudentsPuls"
                     download="学生导入模板">下载模板</a>
             </el-link></div>

          </div>
         </el-upload>
        </span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisiblePlus = false">取 消</el-button>
            <el-button type="primary" @click="upload">确 定</el-button>
          </span>
        </el-dialog>


        <div class="manage">
          <!--        管理-->

          <!--          <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%;text-align: center;"-->
          <!--                    @selection-change="handleSelectionChange" border>-->
          <!--            <el-table-column type="index" label="序号" width="120" class="center"></el-table-column>-->
          <!--            <el-table-column prop="name" label="标题信息" show-overflow-tooltip></el-table-column>-->
          <!--            <el-table-column prop="createTime" label="学生姓名" width="160%" show-overflow-tooltip></el-table-column>-->
          <!--            <el-table-column prop="address" label="班级" width="150%" show-overflow-tooltip></el-table-column>-->
          <!--            <el-table-column prop="stuNum" label="学号" width="180%"></el-table-column>-->
          <!--            <el-table-column-->
          <!--              prop="createTime"-->
          <!--              label="发布时间"-->
          <!--              width="200%">-->
          <!--            </el-table-column>-->
          <!--            <el-table-column-->
          <!--              label="操作"-->
          <!--              width="120">-->
          <!--              <template slot-scope="scope">-->
          <!--                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>-->
          <!--              </template>-->
          <!--            </el-table-column>-->
          <!--          </el-table>-->


          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%;text-align: center;"
            @selection-change="handleSelectionChange" border>
            <el-table-column
              type="index"
              label="序号"
              width="100%" class="center">
            </el-table-column>
            <el-table-column
              prop="name"
              label="测评名称">
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="创建时间"
              width="420%"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="enable"
              v-model="statu"
              label="状态"
              width="246%"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.enable==1">正常</span>
                <span v-else-if="scope.row.enable==0">禁用</span>
              </template>
            </el-table-column>

            <el-table-column label="操作" width="220%" show-overflow-tooltip>
              <template slot-scope="scope">

                <el-button @click="handleClick(scope.row.id)" type="text" size="small">
                  <!--                    <router-link to="{path:'heartDetails',query:{id:scope.row.id}}">-->
                  详情
                  <!--                    </router-link>-->

                </el-button>
                <el-button type="text" size="small" @click="compile(scope.row)">编辑</el-button>

                <el-button type="text" size="small" @click="install(scope.row.id)">
                  设置
                </el-button>
                <el-button @click.native.prevent="deleteRow(scope.row)" type="text" size="small">
                  删除
                </el-button>

              </template>

            </el-table-column>
          </el-table>
          <!--            编辑弹框-->
          <el-dialog :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
            <div class="redact">
              编辑
            </div>
            <div class="setting">
              <div class="information">
                <el-form ref="form" :model="options" label-width="80px">
                  <el-form-item label="测评信息">
                    <el-input type="text" placeholder="请输入内容" v-model="options.name" maxlength="20"
                              show-word-limit></el-input>
                    <!--                  <div style="margin: 20px 0;"></div>-->
                    <!--                  <el-input type="textarea" placeholder="请输入内容" v-model="textarea" maxlength="30" show-word-limit></el-input>-->
                  </el-form-item>
                </el-form>
              </div>
              <div class="status">
                <el-form ref="form" :model="options" label-width="80px">
                  <el-form-item label="状态">
                    <el-radio v-model="options.enable" label="1">正常</el-radio>
                    <el-radio v-model="options.enable" label="0">停用</el-radio>
                    <div style="margin: 20px 0;"></div>
                  </el-form-item>
                </el-form>
              </div>
            </div>
            <span slot="footer" class="dialog-footer">
             <el-button @click="dialogVisible = false">取 消</el-button>
             <el-button type="primary" @click="editConfirm">确 定</el-button>
             </span>
          </el-dialog>
          <!--            添加弹框-->
          <el-dialog :visible.sync="dialogVisibleAddB" width="40%" :before-close="handleClose">
            <div class="redact">
              添加
            </div>
            <div class="setting">
              <div class="information">
                <el-form ref="form" :model="form" label-width="80px">
                  <el-form-item label="测评信息">
                    <el-input type="text" placeholder="请输入内容" v-model="form.text" maxlength="20"
                              show-word-limit></el-input>
                    <!--                  <div style="margin: 20px 0;"></div>-->
                    <!--                  <el-input type="textarea" placeholder="请输入内容" v-model="textarea" maxlength="30" show-word-limit></el-input>-->
                  </el-form-item>
                </el-form>
              </div>
              <div class="status">
                <el-form ref="form" :model="form" label-width="80px">
                  <el-form-item label="状态">
                    <span class="el-icon-question" style="margin-left: -10px;margin-right: 30px"></span>
                    <el-radio disabled v-model="form.radio" label="禁用">正常</el-radio>
                    <el-radio v-model="form.radio" checked label="0">停用</el-radio>
                    <div style="margin: 20px 0;"></div>
                  </el-form-item>
                </el-form>
              </div>
            </div>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleAddB = false">取 消</el-button>
    <el-button type="primary" @click="addLogin">确 定</el-button>
  </span>
          </el-dialog>
        </div>
        <!--        分页-->
        <div class="paging">
          <el-pagination class="pag"
                         background
                         layout="prev, pager, next"
                         :total=Number(this.total)
                         :current-page="Number(query.pageNum)"
                         :page-size="Number(query.pageSize)"
                         @size-change="appointChangSize" @current-change="appointChangCurrent">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  width: 100%;
  //height: calc(100vh - 84px);
  background-color: #F2F3F4;
  padding: 10px 20px;

  .evaluation {
    width: 100%;
    height: 100%;
    background-color: white;
    padding: 30px 20px;

    .manage {
      margin-top: 30px;
    }
  }
}
.search{
  aisplay: flex;
  justify-content: space-between;
  .titleBtn{
    margin-right: 30px;
  }
}
.redact {
  width: 100%;
  background-color: #1892FF;
  padding: 20px;
  color: white;
  margin-top: -30px;
}

.setting {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  .information {
    width: 80%;
    margin-top: 20px;
    //margin: 20px 0px 0px 40px;
  }

  .status {
    width: 88%;
  }
}

::v-deep .dialog-footer {
  display: flex;
  justify-content: center;
}

//编辑弹框
::v-deep .el-dialog__body {
  padding: 0px;
}

::v-deep .el-dialog {
  border-radius: 8px;
  overflow: hidden;
}

::v-deep .el-dialog__headerbtn .el-dialog__close {
  color: white;
}

//表格内容居中
::v-deep .el-table th.el-table__cell > .cell {
  text-align: center;
}

::v-deep .el-table--border .el-table__cell:first-child .cell {
  text-align: center;
}

::v-deep .el-table .cell.el-tooltip {
  text-align: center;
}

::v-deep .el-table .cell {
  text-align: center;
}

::v-deep .el-dialog__header {
  background-color: #1892ff;
}

::v-deep .el-dialog__title {
  color: white;
}

::v-deep .el-upload {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

::v-deep .el-upload__tip {
  display: flex;
  justify-content: center;
}

.paging {
  width: 100%;
  overflow: hidden;
  margin-top: 20px;

  .pag {
    float: right;
  }
}

::v-deep .el-table .el-table__header-wrapper th {
  background-color: #f8f8f8;
}
::v-deep .el-input__inner{
  width: 200px;
}
::v-deep .search[data-v-3699c808]{
  display: flex;
}
::v-deep .el-input__inner{
    width: 100%;
}
</style>
